<template>
  <!-- 头部导航 -->
  <nut-config-provider :theme-vars="themeVars">
  <van-nav-bar title="消息" left-text="返回"  left-arrow @click-left="onClickLeft" right-text="按钮" @click-right="onClickRight">
  <!-- <template #right>
        <van-icon name="setting-o" color="black" size="20" />
      </template> -->
  </van-nav-bar>
  <!-- 滚动消息 -->
  <van-notice-bar scrollable left-icon="volume-o" text="您有一个订单未处理。" /> <br>
   
  <!-- 消息列表 -->
  <van-swipe-cell> 
    <van-row justify="space-around" style="display: flex;"
     v-for="ml in messageLists "  :key="ml.id"  @click="toMessageView(ml.id)" >
      <van-col span="7" style="margin: auto;"  >
        <!-- 徽标 有消息会提示 -->
        <van-badge :content="ml.dott" style="left: 1px; top: 7px;" >
          <div>
            <!-- 头像 -->
            <van-image  round :src="getImageUrl(ml.pic)" height="75" width="75" />
          </div>
        </van-badge>
      </van-col>
      <van-col  span="17" style="margin: auto;">
        <!-- margin: 2个参数：上下， 左右； 4个参数：上 右 下 左 -->
        <van-row style="margin: 0px 0px -10px 0px;">
          <p style="font-size: 16px; font-weight: bold;">{{ ml.title }} </p>
        </van-row>
        <van-row style="margin-top: 8px;">
          <p style="font-size: 13px;">{{ ml.content }} </p>
        </van-row>
        <van-row style="margin-top: 5px;" gutter="10">
          <p style="font-size: 10px;">{{ ml.time }} </p>
        </van-row>
      </van-col>
      <!-- 商品图片 -->
      <!-- <van-col  offset="3">
        <van-image  :src="getImageUrl(ml.pic)" height="60" width="60" />
      </van-col> -->
    </van-row>
    <br>
  </van-swipe-cell>
  </nut-config-provider>
</template>
<script setup>
import { onMounted } from 'vue';
import { reactive } from 'vue';
import { useRouter } from 'vue-router'; //路由器
import {default as http, getImageUrl} from '@/utils/request.js';
const onClickLeft = () => history.back();
const onClickRight = () => showToast('按钮');
const router = useRouter(); //获取到 router 对象，用于编程式跳转导航
// 消息列表
const messageLists = reactive([
]);
//头像
const useravg = reactive([
]);

// 获取消息列表
const getMessageLists=function() {
  http.get(
'/user/messagelist'
 ).then((res) => {
  console.log('获取到的消息列表：', res.data);
messageLists.splice(0);//todo 需要将原有的元素清空
res.data.data.forEach(message => {
messageLists.push(message);
 });
// console.log('获取到的消息列表ss：', messageLists);
 })
};

// 跳转到聊天页面
const toMessageView=function(id){
  console.log("消息ID:",id);
  router.push({name:"message", params: { id: id }});
  // router.push({path:"/message" + id });
};
onMounted(()=>{
// 获取消息列表
  getMessageLists(); 
  //获取个人信息
  // GET 请求： 第2个参数：config
  http.get("/user/info").then((response) => {
    console.log("获取个人信息 = ", response);
  }).catch(() => {
  });;
});
</script>
<style scoped >

</style>
   